<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>调血回退审核</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
<div class="data-manage-table">
    <template>
        <!--搜索-->
        <el-form ref="form" :inline="true" style="padding:0 20px 0 20px;">
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
            <el-form-item label="申请编号">
                <el-input v-model="pagination.id" placeholder="请输入申请编号"></el-input>
            </el-form-item>
            <el-form-item label="申请医院名称">
                <el-select v-model="pagination.applyHosName">
                    <el-option v-for="item in bloodSourceList" :key="item.code" :label="item.source" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请状态">
                <el-select v-model="pagination.state">
                    <el-option v-for="item in transferStatesList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
                <el-button type="info" @click="getByQueryPage()">清空</el-button>
<!--                <el-button type="warning" @click="addDialogVisible = true">添加</el-button>-->
                <el-button type="warning" @click="test()">test</el-button>
            </el-form-item>
        </el-form>


        <el-table :data="tableData" style="width: 100%;" border :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change=""  @row-dblclick="rowDblClick" @row-click="rowClick" highlight-current-row="true" height="260">
            <el-table-column prop="applyId"         label="申请编号" width="200" align="center"></el-table-column>
            <el-table-column prop="relatedId"         label="关联单号" width="200" align="center"></el-table-column>
            <el-table-column prop="applyHospitalName"               label="医院名称" width="200" align="center">
                <template slot-scope="scope">
                    {{ getBloodSourceName(scope.row.applyHospitalName) }}
                </template>
            </el-table-column>
            <el-table-column prop="applicant"           label="申请人" width="100" align="center"></el-table-column>
            <el-table-column prop="applyTime"           label="申请时间" width="200" align="center"></el-table-column>
            <el-table-column prop="state"               label="状态" width="150" align="center">
                <template slot-scope="scope">
                    {{ getTransferStateName(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="approveConfirmVisible=true;approveConfirm(scope.row)" :disabled="scope.row.state != '0'">通过</el-button>
                    <el-button size="mini" type="danger" @click="rejectConfirmVisible=true;rejectId(scope.row)" :disabled="scope.row.state != '0'">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--驳回确认-->
        <el-dialog title="是否驳回？" :visible.sync="rejectConfirmVisible" width="50%" >
            <el-descriptions title="申请信息" :content-style="rowCenter" :label-style="rowCenter" :column="2" border>
                <el-descriptions-item>
                    <template slot="label" align="center">
                        申请编号
                    </template>
                    {{rejectData.rejectId}}
                </el-descriptions-item><el-descriptions-item>
                <template slot="label" align="center">
                    申请医院名称
                </template>
                {{rejectData.applyHospitalName}}
            </el-descriptions-item><el-descriptions-item>
                <template slot="label" align="center">
                    申请人
                </template>
                {{rejectData.applicant}}
            </el-descriptions-item><el-descriptions-item>
                <template slot="label" align="center">
                    申请时间
                </template>
                {{rejectData.applyTime}}
            </el-descriptions-item><el-descriptions-item>
                <template slot="label" align="center">
                    驳回理由
                </template>
                <el-input v-model="rejectData.rejectReason"></el-input>
            </el-descriptions-item>
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectConfirmVisible = false">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
                </span>
        </el-dialog>

        <!-- 审核通过确认 -->
        <el-dialog title="" :visible.sync="approveConfirmVisible" >
            <!--申请血液信息-->
            <el-descriptions title="申请血液信息" :content-style="rowCenter" :label-style="rowCenter" :column="2" border>
            </el-descriptions>
            <el-table :data="bloodData" style="width: 100%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change="" >
                <el-table-column prop="bloodNumber"    label="血液编号" width="100" align="center"></el-table-column>
                <el-table-column prop="bloodComponent"  label="血液成分" width="200" align="center">
                    <template slot-scope="scope">
                        {{ getBloodComponentName(scope.row.bloodComponent) }}
                    </template>
                </el-table-column>
                <el-table-column prop="aboType"         label="ABO血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getAboBloodName(scope.row.aboType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="rhType"          label="Rh血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getRhBloodName(scope.row.rhType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="specification"          label="规格" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getBloodSizeName(scope.row.specification) }}
                    </template>
                </el-table-column>

                <el-table-column prop="extendCode"     label="扩展码" width="100" align="center"></el-table-column>
                <el-table-column prop="collectTime"    label="采集日期" width="200" align="center"></el-table-column>
                <el-table-column prop="failureTime"    label="失效日期" width="200" align="center"></el-table-column>
                <el-table-column prop="bloodAmount"    label="金额" width="100" align="center"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="approveConfirmVisible=false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 认</el-button>
            </div>
        </el-dialog>

        <el-drawer
                title="申请血液详情"
                :visible.sync="bloodDataVisible"
                direction="btt"
                size="40%">
            <!--申请血液信息-->
            <el-table :data="bloodData" style="width: 100%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change="" >
                <el-table-column prop="bloodNumber"    label="血液编号" width="100" align="center"></el-table-column>
                <el-table-column prop="bloodComponent"  label="血液成分" width="200" align="center">
                    <template slot-scope="scope">
                        {{ getBloodComponentName(scope.row.bloodComponent) }}
                    </template>
                </el-table-column>

                <el-table-column prop="aboType"         label="ABO血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getAboBloodName(scope.row.aboType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="rhType"          label="Rh血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getRhBloodName(scope.row.rhType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="specification"          label="规格" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getBloodSizeName(scope.row.specification) }}
                    </template>
                </el-table-column>
                <el-table-column prop="extendCode"     label="扩展码" width="100" align="center"></el-table-column>
                <el-table-column prop="collectTime"    label="采集日期" width="200" align="center"></el-table-column>
                <el-table-column prop="failureTime"    label="失效日期" width="200" align="center"></el-table-column>
                <el-table-column prop="bloodAmount"    label="金额" width="100" align="center"></el-table-column>

            </el-table>
        </el-drawer>

        <!--分组插件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[2,4,6,8,10]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
            </el-pagination>
        </div>
    </template>
</div>




<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.min.css" rel="stylesheet">
<script src="/js/httpVueLoader.js"></script>
<script src="/js/jquery.min.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>



<script>

    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    rowCenter:{
                        "text-align":"center"
                    },

                    approveConfirmVisible:false,
                    approveId:'',

                    //
                    bloodDataVisible:false,
                    //驳回确认
                    rejectConfirmVisible:false,
                    rejectData:{},
                    //申请状态列表
                    transferStatesList:[],
                    //血液状态列表
                    stateList : [],

                    //ABO血型列表
                    aboBloodTypeList : [],

                    //Rh血型列表
                    rhBloodTypeList : [],

                    //血液成分列表
                    bloodComponentList : [],
                    bloodSourceList: [],

                    //分页相关信息
                    pagination: {
                        currentPage: 1,
                        pageSize: 4,
                        total: 0,
                        //查询条件
                        id:'',
                        applyHosName : '',
                        state : '',
                    },

                    //样本位置
                    location: [],

                    //弹出框显示
                    dialogVisible: false,

                    //搜索样本信息
                    searchSample: {
                    },

                    //表格信息
                    tableData: [],

                    //血液信息
                    bloodData: [],

                    user:{
                        id:101,
                        name:"tom"
                    }

                }
            },

            //自动触发写入函数
            created(){
                this.getByQueryPage();

            },
            mounted() {
                this.getState();
                this.getAboBloodType();
                this.getRhBloodType();
                this.getBloodComponent();
                this.getTransferState();
                this.getBloodSize();
                this.getBloodSource();
            },

            methods: {
                test(){
                    console.log(this.getNowTime())
                },

                //审核驳回
                handleClose(){
                    this.rejectData = ''
                },
                rejectId(row){
                    this.rejectData.rejectId = row.applyId;
                    this.rejectData.applyHospitalName= row.applyHospitalName;
                    this.rejectData.applicant= row.applicant;
                    this.rejectData.applyTime= row.applyTime;
                },
                reject() {
                    axios.get('/returnblood/review/reject', {
                        params: {
                            applyId: this.rejectData.rejectId,
                            rejectReason: this.rejectData.rejectReason,
                            auditorId: this.user.id,
                            auditTime: this.getNowTime()
                        }
                    }).then((res) => {
                        if (res.data.code == '200') {
                            this.$notify({
                                title: '成功',
                                message: '驳回成功',
                                type: 'success',
                            })
                        }
                    });
                    window.setTimeout(function () {
                        window.location.reload();
                    },1000)//2秒
                },

                approveConfirm(row){
                    this.approveId = row.applyId;
                },
                //审核通过
                submit() {
                    axios.get('/returnblood/review/approve', {
                        params: {
                            applyId: this.approveId,
                            auditorId: this.user.id,
                            auditTime: this.getNowTime()
                        }
                    }).then((res) => {
                        if (res.data.code == '200') {
                            this.$notify({
                                title: '成功',
                                message: '审核成功',
                                type: 'success',
                            })
                        }
                    });
                    window.setTimeout(function () {
                        window.location.reload();
                    },1000)//2秒
                },

                rowDblClick(row){
                    this.bloodDataVisible = true;
                    axios.get('/returnbloodinformation/normal/getAll',
                        {params:{
                                id:row.applyId
                            }
                        }).then((res)=>{
                        console.log("****************")
                        console.log(res.data);
                        if(res.data.code=="200"){
                            console.log(res.data.data)
                            this.bloodData = res.data.data;
                        }
                    });
                },
                rowClick(row){
                    axios.get('/returnbloodinformation/normal/getAll',
                        {params:{
                                id:row.applyId
                            }
                        }).then((res)=>{
                        console.log("****************")
                        console.log(res.data);
                        if(res.data.code=="200"){
                            console.log(res.data.data)
                            this.bloodData = res.data.data;
                        }
                    });
                },

                //生成单号
                generateNumberBySnowFlake(id,flag){
                    axios.get('/bloodtransfer/normal/getId',{
                        params:{
                            id : id,
                            flag : flag
                        }
                    }).then((res)=>{
                        if(res.data.code=='200'){
                            this.flag = 1;
                            var id = res.data.data;
                            return id
                        }else{
                            return ''
                        }
                    })
                },



                getByQueryPage:function(flag){
                    if(flag != 1){
                        this.pagination.id = '';
                        this.pagination.applyHosName = '';
                        this.pagination.state = '';
                        this.pagination.currentPage = 1;
                    }
                    axios.get('/returnblood/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                        {
                            params:{
                                applyId : this.pagination.id,
                                applyHospitalName : this.pagination.applyHosName,
                                state :this.pagination.state,
                            }
                        }).then((res)=>{
                        console.log(res.data);
                        if (res.data.code === "200") {
                            this.pagination.pageSize = res.data.data.size;
                            this.pagination.currentPage = res.data.data.current;
                            this.pagination.total = res.data.data.total;
                            // this.tableData = Object.values(res.data.data.records);
                            this.tableData = Object.values(res.data.data.records);
                        } else{
                            this.$message.success("查询失败");
                        }
                    });
                },

                // 获取血液状态字典
                getState(){
                    axios.get('/state/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200'){
                                this.stateList = res.data.data
                            } else {
                                this.$notify.error({
                                    title : '错误',
                                    message : '获取数据失败'
                                })
                            }
                        })
                },
                // 将表格中的State字段的code转换成name
                getStateName(code){
                    for (var i=0;i<this.stateList.length;i++){
                        if (this.stateList[i].code == code){
                            return this.stateList[i].state
                        }
                    }
                },

                // 获取申请状态字典
                getTransferState(){
                    axios.get('/transferState/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200'){
                                this.transferStatesList = res.data.data
                            } else {
                                this.$notify.error({
                                    title : '错误',
                                    message : '获取数据失败'
                                })
                            }
                        })
                },
                // 将表格中的State字段的code转换成name
                getTransferStateName(code){
                    for (var i=0;i<this.transferStatesList.length;i++){
                        if (this.transferStatesList[i].code == code){
                            return this.transferStatesList[i].name
                        }
                    }
                },
                // 将表格中的State字段的name转换成code
                getTransferStateCode(name){
                    for (var i=0;i<this.transferStatesList.length;i++){
                        if (this.transferStatesList[i].name == name){
                            return this.transferStatesList[i].code
                        }
                    }
                },

                // 获取abo血型字典
                getAboBloodType(){
                    axios.get('/aboType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.aboBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                // 将表格中aboBloodType字段的code转换成name
                getAboBloodName(code){
                    for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                        if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.aboBloodTypeList[i].name;
                        }
                    }
                },
                // 将表格中aboBloodType字段的code转换成name
                getAboBloodCode(name){
                    for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                        if (this.aboBloodTypeList[i].name == name) { //dictValue，dictLabel保持和上面定义一致
                            return this.aboBloodTypeList[i].code;
                        }
                    }
                },

                // 获取rh血型字典
                getRhBloodType(){
                    axios.get('/rhType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.rhBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                // 将表格中rhType字段的code转换成name
                getRhBloodName(code){
                    for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                        if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.rhBloodTypeList[i].name;
                        }
                    }
                },
                // 将表格中rhType字段的name转换成code
                getRhBloodCode(name){
                    for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                        if (this.rhBloodTypeList[i].name == name) { //dictValue，dictLabel保持和上面定义一致
                            return this.rhBloodTypeList[i].code;
                        }
                    }
                },


                // 获取血液成分字典
                getBloodComponent(){
                    axios.get('/bloodComposition/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.bloodComponentList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                // 将表格中bloodComponent字段的code转换成name
                getBloodComponentName(code){
                    for (var i = 0; i < this.bloodComponentList.length; i++) {
                        if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.bloodComponentList[i].composition;
                        }
                    }
                },
                // 将表格中bloodComponent字段的name转换成code
                getBloodComponentCode(composition ){
                    for (var i = 0; i < this.bloodComponentList.length; i++) {
                        if (this.bloodComponentList[i].composition == composition ) { //dictValue，dictLabel保持和上面定义一致
                            return this.bloodComponentList[i].code;
                        }
                    }
                },
                // 获取血量字典
                getBloodSize(){
                    axios.get('/bloodSize/normal/getName1')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.specificationList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },

                // 将表格中bloodCount字段的code转换成size
                getBloodSizeName(code){
                    for (var i = 0; i < this.specificationList.length; i++) {
                        if (this.specificationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.specificationList[i].size;
                        }
                    }
                },

                // 将表格中bloodCount字段的size转换成code
                getBloodSizeCode(name){
                    for (var i = 0; i < this.specificationList.length; i++) {
                        if (this.specificationList[i].size == name) { //dictValue，dictLabel保持和上面定义一致
                            return this.specificationList[i].code;
                        }
                    }
                },
                // 获取医院字典
                getBloodSource(){
                    axios.get('/bloodSource/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.bloodSourceList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },

                // 将表格中BloodSource字段的code转换成source
                getBloodSourceName(code){
                    for (var i = 0; i < this.bloodSourceList.length; i++) {
                        if (this.bloodSourceList[i].code == code) {
                            return this.bloodSourceList[i].source;
                        }
                    }
                },

                // 分页查询 每页显示多少条数据
                handleSizeChange:function(pageSize){
                    this.pagination.pageSize = pageSize;
                    this.getByQueryPage(1);
                },

                //分页查询 切换页码
                handleCurrentChange:function(currentPage){
                    this.pagination.currentPage = currentPage;
                    //执行查询
                    this.getByQueryPage(1);
                },

                update(row){
                    console.log(row.applyId)
                },


                // 编辑表格
                editTableData(row){
                    this.bloodNumIndex = row.bloodNumber;
                },
                edit(){
                    alert("hello")
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                //取消按钮
                cancel(){

                },

                // 获取当前时间
                getNowTime(){
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth()+1;
                    var day = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();

                    var time = year + '-' + this.handleTimeStr(month) + '-' +
                        this.handleTimeStr(day) + ' ' + this.handleTimeStr(hour) + ':' + this.handleTimeStr(minute)
                        + ':' + this.handleTimeStr(second);
                    console.log(time)
                    return time;
                },
                // 时间标准化
                handleTimeStr(tStr){  // 解决 10:2:2 出现各位数字格式化为 10:02:02
                    if (tStr < 10){
                        return '0'+ tStr
                    }else {
                        return tStr
                    }
                },

            }

        });
    })()
</script>

</body>

</html>